<template>
  <Modal :ok-button-props="{ props: { disabled: !confirmEnable } }" class="h-flow-user-manual-selector"
         ok-text="确定" cancel-text="取消" :width="800" :closable="false"
         @cancel="close" @ok="handleOK" :visible="visible">
    <Tabs>
      <TabPane v-for="item in userManualSelect.select"
               :key="item.nodeId" :tab="item.nodeName">
        <UserSelector v-model="taskSelects[item.nodeId]" :dataSource="item.users"/>
      </TabPane>
    </Tabs>
  </Modal>
</template>
<script>
import {Modal, Tabs} from 'ant-design-vue';
import {createModelProps, createProps, isEmpty} from '@/utils';
import UserSelector from '@/components/UserManualSelector/UserSelector.vue';

export default {
  name: 'UserManualSelector',
  model: createModelProps(),
  props: {
    value: createProps(Object),
    userManualSelect: createProps(Object, () => ({
      flowProcessDefinitionRefId: undefined,
      select: [],
    }))
  },
  components: {UserSelector, Modal, Tabs, TabPane: Tabs.TabPane},
  data() {
    return {
      taskSelects: {},
      disabled: true,
      visible: false,
    };
  },
  methods: {
    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.$emit('close')
    },
    handleOK() {
      let data = {...this.userManualSelect};
      data.select = [];
      for (const nodeId in this.taskSelects) {
        data.select.push(this.taskSelects[nodeId]);
      }
      this.$emit('ok', data);
      this.close();
    },
  },
  watch: {
    userManualSelect: {
      handler() {
        if (!this.userManualSelect) {
          this.taskSelects = {};
          return;
        }

        let map = {};
        let list = this.userManualSelect.select || [];
        list.forEach(item => {
          map[item.nodeId] = {
            nodeId: item.nodeId,
            nodeName: item.nodeName,
            multiple: item.multiple,
            userMenuSelectReason: item.userMenuSelectReason,
            users: [],
          };
        });
        this.taskSelects = map;
      },
      immediate: true
    }
  },
  computed: {
    confirmEnable() {
      let map = this.taskSelects;
      for (const mapKey in map) {
        if (isEmpty(map[mapKey].users)) {
          return false;
        }
      }
      return true;
    },
  },
};
</script>
<style>
.h-flow-user-manual-selector .ant-tabs-top-bar {
  margin: 0;
}

.h-flow-user-manual-selector .ant-tabs-nav-scroll {
  text-align: center;
  padding-top: 8px;
}

.h-flow-user-manual-selector .ant-modal-body {
  padding: 0;
}

.h-flow-user-manual-selector {

}
</style>